<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<em class="ddp-bg-back"></em>
<div class="ddp-ui-contents-in">
  <!-- top -->
  <div class="ddp-ui-contents-top">
    <div class="ddp-ui-title">
      {{'msg.comm.menu.manage.monitoring' | translate}}
    </div>
    <!-- tab -->
    <ul class="ddp-list-top-tab">
      <li>
        <a [routerLink]="['/management/monitoring/statistics']">
          {{'msg.comm.menu.manage.monitoring.statistics' | translate}}
        </a>
      </li>
      <li class="ddp-selected">
        <a [routerLink]="['/management/monitoring/audit']">
          {{'msg.comm.menu.manage.monitoring.audit' | translate}}
        </a>
      </li>
    </ul>
    <!-- //tab -->
  </div>
  <!-- //top -->

  <div class="ddp-ui-contents-list">
    <div class="ddp-wrap-option">
      <!-- option -->
      <div class="ddp-ui-option ddp-clear">
        <!-- time filter -->
        <div class="ddp-wrap-edit">
          <label class="ddp-label-type">{{'msg.lineage.ui.property.title.log-type' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <!-- select box -->
            <component-select
              [array]="types"
              [viewKey]="'label'"
              [defaultIndex]="logTypeDefaultIndex"
              (onSelected)="onChangeType($event)">
            </component-select>
            <!-- //select box -->
          </div>
          <!-- //edit option -->
        </div>
        <!-- //time filter -->

        <!-- Status -->
        <div class="ddp-wrap-edit">
          <label class="ddp-label-type">{{'msg.log.th.status' | translate}}</label>
          <!-- edit option -->
          <div class="ddp-ui-edit-option ddp-inline">
            <label class="ddp-label-radio"
                   *ngFor="let status of statusTypes"
                   (change)="onChangeStatus(status)">
              <input type="radio" [checked]="selectedStatus.value === status.value">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{status.label}}</span>
            </label>
          </div>
          <!-- //edit option -->
        </div>
        <!-- //Status -->

        <div class="ddp-wrap-edit">
          <label class="ddp-label-type">{{'msg.log.ui.limit.elapsed.time' | translate}}</label>

          <!-- edit option -->
          <div class="ddp-ui-edit-option">
            <a href="javascript:" class="ddp-btn-toggle ddp-all"
               [ngClass]="{'ddp-selected' : 'ALL' === selectedElapsedTime}"
               (click)="onClickElapsedTime('ALL')">
              {{'msg.comm.ui.list.all' | translate}}
            </a>
            <a href="javascript:"
               class="ddp-btn-toggle ddp-today"
               [ngClass]="{'ddp-selected' : 10 === selectedElapsedTime}"
               (click)="onClickElapsedTime(10)">
              {{'msg.log.btn.over.num.ms' | translate :{ value : 10} }}
            </a>
            <a href="javascript:" class="ddp-btn-toggle ddp-last"
               [ngClass]="{'ddp-selected' : 30 === selectedElapsedTime}"
               (click)="onClickElapsedTime(30)">
              {{'msg.log.btn.over.num.ms' | translate :{ value : 30} }}
            </a>
            <a href="javascript:" class="ddp-btn-toggle ddp-last"
               [ngClass]="{'ddp-selected' : 60 === selectedElapsedTime}"
               (click)="onClickElapsedTime(60)">
              {{'msg.log.btn.over.num.ms' | translate :{ value : 60} }}
            </a>

            <div class="ddp-ui-time">
              <div class="ddp-box-calen">
                <input class="ddp-input-typebasic"
                       (keyup)="elapsedTimeKeyup()"
                       input-mask="number" #elapsedTime>
              </div>

            </div>
            <a href="javascript:" class="ddp-btn-line-s"
               (click)="onClickElapsedTime()">{{'msg.comm.ui.apply' | translate}}
            </a>

          </div>
          <!-- //edit option -->

        </div>
        <div class="ddp-ui-rightoption">
          <a href="javascript:" (click)="refreshFilters()"
             class="ddp-link-reset">
            <em class="ddp-btn-reset3"></em>
            {{'msg.mem.btn.refresh' | translate}}
          </a>
        </div>
      </div>
      <!-- //option -->
      <!-- option -->
      <div class="ddp-ui-option ddp-clear">
        <!-- edit -->
        <component-period
          [title]= "'msg.statistics.th.start.time' | translate"
          [roundSecond]="true"
          (changeDate)="onChangeDate($event)"
          [startDateDefault]="selectedDate?.startDate"
          [endDateDefault]="selectedDate?.endDate"
          [defaultType]="selectedDate?.type"
        ></component-period>
        <!-- //edit -->
      </div>
      <!-- //option -->

      <!-- option -->
      <div class="ddp-ui-option ddp-optiontype ddp-clear">
        <!-- 검색 -->
        <div class="ddp-form-search ddp-fleft">
          <em class="ddp-icon-search"></em>
          <component-input
            [compType]="'search'"
            [value]="searchText"
            [placeHolder]="'msg.log.ui.search.description' | translate"
            (changeValue)="searchText = $event; search();">
          </component-input>
        </div>
        <!-- //검색 -->
        <!-- right -->
        <div class="ddp-ui-rightoption">
          <span class="ddp-data-total ddp-only">
          {{'msg.log.ui.num.lists' | translate : {value : pageResult.totalElements } }}
          </span>
          <!-- 버튼 -->
          <a href="javascript:" class="ddp-btn-link ddp-type" (click)="downloadCsv()">
            <em class="ddp-icon-export"></em>
            <div class="ddp-ui-tooltip-info">
              <em class="ddp-icon-view-top"></em>
              {{'msg.log.btn.download.csv' | translate}}
            </div>
          </a>
          <!-- //버튼 -->
        </div>
        <!-- //right -->
      </div>
      <!-- //option -->
    </div>

    <table class="ddp-table-form ddp-table-type3" *ngIf="auditList.length > 0">
      <colgroup>
        <col width="100px">
        <col width="*">
        <col width="10%">
        <col width="70px">
        <col width="10%">
        <col width="15%">
        <col width="10%">
      </colgroup>
      <thead>
      <tr>
        <th>
          {{'msg.log.th.status' | translate}}
        </th>
        <th>
          {{'msg.log.th.job.name' | translate}}
        </th>
        <th>
          {{'msg.log.th.application.id' | translate}}
        </th>
        <th>
          {{'msg.log.th.queue' | translate}}
        </th>
        <th>
          {{'msg.log.th.user.id' | translate}}
        </th>
        <th class="ddp-cursor" (click)="sort('startTime')">
          {{'msg.log.th.started.time' | translate}}
          <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'startTime' || selectedContentSort.sort === 'default'"></em>
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'startTime' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'startTime' && selectedContentSort.sort === 'desc'"></em>
        </th>
        <th class="ddp-cursor" (click)="sort('elapsedTime')">
          {{'msg.log.th.elapsed.time' | translate}}
          <em class="ddp-icon-array-default2" *ngIf="selectedContentSort.key !== 'elapsedTime' || selectedContentSort.sort === 'default'"></em>
          <em class="ddp-icon-array-asc2" *ngIf="selectedContentSort.key === 'elapsedTime' && selectedContentSort.sort === 'asc'"></em>
          <em class="ddp-icon-array-des2" *ngIf="selectedContentSort.key === 'elapsedTime' && selectedContentSort.sort === 'desc'"></em>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let audit of auditList" (click)="auditDetailOpen(audit.id)">
        <td>
        <span class="ddp-data-state"
              [class.ddp-fail]="audit.status && audit.status.toString() === 'FAIL'"
              [class.ddp-success]="audit.status && audit.status.toString() === 'SUCCESS'"
              [class.ddp-running]="audit.status && audit.status.toString() === 'RUNNING'"
              [class.ddp-cancelled]="audit.status && audit.status.toString() === 'CANCELLED'">
          {{audit.status}}
        </span>
        </td>
        <td>
          <span class="ddp-txt-long">{{audit.jobName}}</span>
        </td>
        <td>
          {{audit.applicationId || '-' }}
        </td>
        <td>
          {{audit.queue || '-'}}
        </td>
        <td>
          {{audit.user}}
        </td>
        <td>
          {{audit.startTime | mdate:'YYYY-MM-DD HH:mm'}}
        </td>
        <td>
          {{CommonUtil.convertMilliseconds(audit.elapsedTime)}}
        </td>
      </tr>
      </tbody>
    </table>

    <div class="ddp-data-source-none" *ngIf="auditList.length === 0; else yesAl">
      {{'msg.log.ui.no.log' | translate}}
    </div>
    <!-- //데이터 없음 -->

    <ng-template #yesAl>
      <component-pagination [info]="pageResult"
                            (changePageData)="changePage($event)">
      </component-pagination>
    </ng-template>
  </div>
</div>

<!--&lt;!&ndash; audit 디테일 페이지 &ndash;&gt;-->
<!--<app-job-detail *ngIf="mode==='detail-job-log'"-->
<!--[setAuditId]="selectedId"-->
<!--(close)="mode=''"></app-job-detail>-->

<iframe id="downloadCsvIframe" name="downloadCsvIframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="" style="display: none">
</iframe>
<form enctype="application/x-www-form-urlencoded" id="downloadCsvForm" name="downloadCsvForm" method="post" target="downloadCsvIframe" style="display: none">
  <input type="hidden" name="access_token" value=""/>
  <input type="hidden" name="fileName" value=""/>
</form>

